<template>
	<view>

		<!-- 商品列表 -->
		<scroll-view :scroll-top="scrollRightTop" scroll-y scroll-with-animation class="right-box">
			<view class="page-view">
				<view :id="'item' + index" v-for="(item, index) in goodsList" :key="index">

					<uni-list>
						<view class="item-list">
							<uni-list-item :title="item.name" note="价格" :thumb="item.imgs" thumb-size="lg"
								class="item-ginfo" />
							<uni-number-box v-model="item.buyNum" class="item-buyNum"></uni-number-box>
						</view>
					</uni-list>

				</view>
			</view>
		</scroll-view>

		<!-- 底部-合计结算 -->
		<view class="goods-carts">
			<uni-goods-nav :options="bottomOptions" :fill="true" :button-group="buttonGroup" @click="onClick"
				@buttonClick="buttonClick" />
		</view>

	</view>
</template>


<script lang="ts" setup>
import { ref } from "vue";
import { iGoodsList } from "@/interface";


// 底部立即购买
const bottomOptions = [{
	text: '合计：'
}
]

function onClick(e) {
	uni.showToast({
		title: `点击${e.content.text}`,
		icon: 'none'
	})
}
function buttonClick(e) {
	console.log(e)
	this.options[2].info++
}

const buttonGroup = [
	{
		text: '去结算',
		backgroundColor: '#ffa200',
		color: '#fff'
	}
]

// 右边栏目scroll-view的滚动条高度
const scrollRightTop = ref(0)
// 右侧商品列表
const goodsList = ref<iGoodsList[]>([
	{ dictType: 1, code: 'cp011', name: '产品11产品11产品11产品11产品11产品11', imgs: '/static/logo.png', buyNum: 3 },
	{ dictType: 1, code: 'cp012', name: '产品12', imgs: '/static/logo.png', buyNum: 2 },
	{ dictType: 2, code: 'cp021', name: '产品21', imgs: '/static/logo.png', buyNum: 500 },
	{ dictType: 2, code: 'cp022', name: '产品22', imgs: '/static/logo.png', buyNum: 1222 },
	{ dictType: 2, code: 'cp023', name: '产品23', imgs: '/static/logo.png', buyNum: 0 },
	{ dictType: 2, code: 'cp024', name: '产品24', imgs: '/static/logo.png', buyNum: 6 }
])


</script>


<style lang="less" scoped>
/* 底部-合计结算 */
.example-body {
	padding: 0;
	/* #ifndef APP-NVUE */
	display: block;
	/* #endif */
}

.goods-carts {
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: column;
	position: fixed;
	left: 200px;
	right: 0;
	bottom: 50px;
}


/* 商品列表 */
.item-list {
	display: flex;
}

.item-ginfo {
	width: 280px;
}

.item-buyNum {
	height: 26px;
	margin-top: 20px;
	margin-right: 5px;
}
</style>
